<template>
  <div class="dashboard-container waybill-detail">
    <div class="app-container">
      <el-card shadow="never" class="order-box">
        <el-row :gutter="20" justify="center">
          <el-col :span="6">
            <div class="ddbh">
              订单编号：
              <label>{{ waybillDetail.orderId }}</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ydbh">
              运单编号：
              <label>{{ waybillDetail.ydId }}</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="xdsj">
              下单时间：
              <label>{{ waybillDetail.createTime }}</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ddzt">
              订单状态：
              <label v-if="waybillDetail.status == ' 23000'">待取件</label>
              <label v-else-if="waybillDetail.status == '23001'">已取件</label>
              <label
                v-else-if="waybillDetail.status == '23003'"
              >网点入库</label>
              <label v-else-if="waybillDetail.status == '23004'">待装车</label>
              <label v-else-if="waybillDetail.status == '23005'">运输中</label>
              <label
                v-else-if="waybillDetail.status == '23006'"
              >网点出库</label>
              <label v-else-if="waybillDetail.status == '23007'">待派送</label>
              <label v-else-if="waybillDetail.status == '23008'">派送中</label>
              <label v-else-if="waybillDetail.status == '23009'">已签收</label>
              <label v-else-if="waybillDetail.status == '23010'">拒收</label>
              <label v-else>已取消</label>
            </div>
          </el-col>
          <el-col :span="6" style="margin-top: 25px">
            <div class="yjddrq">
              预计到达日期：
              <label>{{ waybillDetail.estimatedArrivalTime }}</label>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-collapse v-model="activeNames" style="margin-top: 20px; border: none">
        <el-collapse-item name="1">
          <template slot="title">
            <h2 class="collapse-detail">基本信息</h2>
          </template>
          <div class="block">
            <el-timeline>
              <div class="pake-info" style="margin-top: 10px">
                <img
                  class="img-info1"
                  src=""
                  alt=""
                >&nbsp;
                <span style="margin-left: 10px; font-size: 16px">发货方</span>
              </div>
              <div style="margin-top: 0px; margin-left: 40px; display: flex">
                <div class="line" />
                <div style="">
                  <div class="demo-input-suffix base-info">
                    发货方姓名：
                    <span>{{ waybillDetail.senderName }}</span>
                  </div>

                  <div class="demo-input-suffix base-info">
                    发货方地址：
                    <span>{{
                      waybillDetail.senderProvince +
                        waybillDetail.senderCity +
                        waybillDetail.senderCounty
                    }}</span>
                  </div>
                </div>
                <div style="margin-left: 174px">
                  <div class="demo-input-suffix base-info">
                    发货方电话：

                    <span>{{ waybillDetail.senderPhone }}</span>
                  </div>
                  <div class="demo-input-suffix base-info">
                    &nbsp;&nbsp;&nbsp;详细地址：

                    <span>{{ waybillDetail.senderAddress }}</span>
                  </div>
                </div>
              </div>
              <div class="pake-info" style="margin-top: 20px">
                <img
                  class="img-info2"
                  src=""
                  alt=""
                >&nbsp;
                <span
                  style="
                    display: inline-block;
                    margin-top: 6px;
                    margin-left: 10px;
                    font-size: 16px;
                  "
                >收货方</span>
              </div>
              <div style="margin-top: 0px; margin-left: 40px; display: flex">
                <div style="">
                  <div class="demo-input-suffix base-info">
                    收货方姓名：
                    <span>{{ waybillDetail.receiverName }}</span>
                  </div>

                  <div class="demo-input-suffix base-info">
                    收货方地址：
                    <span>{{
                      waybillDetail.receiverProvince +
                        waybillDetail.receiverCity +
                        waybillDetail.receiverCounty
                    }}</span>
                  </div>
                </div>
                <div style="margin-left: 174px">
                  <div class="demo-input-suffix base-info">
                    收货方电话：
                    <span>{{ waybillDetail.receiverPhone }}</span>
                  </div>
                  <div class="demo-input-suffix base-info">
                    &nbsp;&nbsp;&nbsp;详细地址：
                    <span>{{ waybillDetail.receiverAddress }}</span>
                  </div>
                </div>
              </div>
            </el-timeline>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-collapse
        v-model="activeNames"
        class="transport-box"
        style="margin-top: 20px"
      >
        <el-collapse-item name="6">
          <template slot="title">
            <h2 class="collapse-detail">运输信息</h2>
          </template>
          <el-scrollbar scroll-x class="order-scroll">
            <el-steps
              v-show="
                waybillDetail.taskTransports &&
                  waybillDetail.taskTransports.length > 0
              "
              shadow="never"
              align-center
              finish-status="success"
            >
              <el-step
                v-for="(item, index) in waybillDetail.taskTransports"
                :key="item.id"
                :class="{
                  lastBefore: !(
                    index !==
                    waybillDetail.taskTransports.length - 1 - 1
                  ),
                  solid:
                    item.status === 4 &&
                    index === waybillDetail.taskTransports.length - 1 - 1,
                }"
                :title="item.startAgency === null ? '' : item.startAgency.name"
                :status="
                  item.status === 1
                    ? 'wait'
                    : item.status === 2
                      ? index === waybillDetail.taskTransports.length - 1 - 1
                        ? 'success'
                        : 'process'
                      : 'success'
                "
              >
                <template
                  v-if="index !== waybillDetail.taskTransports.length - 1"
                  slot="description"
                >
                  <div class="step-row">
                    <table
                      width="100%"
                      border="0"
                      cellspacing="0"
                      cellpadding="0"
                      class="processing_content"
                    >
                      <tr>
                        <td>运输任务：</td>
                        <td class="num">
                          {{ item.id === null ? "--" : item.id }}
                        </td>
                      </tr>
                      <tr>
                        <td>车辆：</td>
                        <td>
                          {{
                            item.truck === null ? "--" : item.truck.licensePlate
                          }}
                        </td>
                      </tr>
                      <tr>
                        <td>司机：</td>
                        <td>
                          {{
                            item.drivers === null
                              ? "--"
                              : item.drivers.map((item) => item.name).join(",")
                          }}
                        </td>
                      </tr>
                      <tr>
                        <td>到达时间：</td>
                        <td>
                          {{
                            item.actualArrivalTime === null
                              ? "--"
                              : item.actualArrivalTime
                          }}
                        </td>
                      </tr>
                    </table>
                  </div>
                </template>
              </el-step>
            </el-steps>
          </el-scrollbar>
        </el-collapse-item>
      </el-collapse>
      <el-collapse
        v-model="activeNames"
        class="customer-table-box"
        style="margin-top: 20px; margin-bottom: 40px"
      >
        <el-collapse-item name="3">
          <template slot="title">
            <h2 class="collapse-detail">货品信息</h2>
          </template>
          <div style="box-sizing: border-box">
            <el-table
              :data="propTableData.col"
              style="width: 100%"
              stripe
              :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
            >
              <div
                v-show="!propTableData.col || propTableData.col.length <= 0"
                slot="empty"
              >
                <p style="margin-top: -10px; padding-bottom: 10px">
                  这里空空如也
                </p>
              </div>
              <el-table-column
                label="序号"
                type="index"
                align="left"
                width="60"
              />
              <el-table-column label="货品名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.name || "--" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="货品类型">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.goodsType === null
                      ? "--"
                      : scope.row.goodsType.name
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="重量（千克）">
                <template slot-scope="scope">
                  <span>{{ scope.row.totalWeight || "--" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="体积（立方）">
                <template slot-scope="scope">
                  <span>{{ scope.row.totalVolume || "--" }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import { getWaybillDetail } from '@/api/waybill'
export default {
  data() {
    return {
      waybillDetail: {
        orderId: '',
        id: '',
        createTime: '',
        status: '',
        estimatedArrivalTime: '',
        senderName: '',
        senderPhone: '',
        senderAddress: '',
        receiverName: '',
        receiverPhone: '',
        receiverAddress: '',
        senderProvince: '',
        senderCity: '',
        senderCounty: '',
        receiverProvince: '',
        receiverCity: '',
        receiverCounty: '',
        amount: '',
        paymentMethod: '',
        paymentStatus: '',
        // 取件信息
        agencyName: '',
        courierName: '',
        pickupType: '',
        zystatus: '',
        courierMobile: '',
        estimatedStartTime: '',
        actualEndTime: '',
        // 派送信息
        psagencyName: '',
        pscourierName: '',
        pszystatus: '',
        pscourierMobile: '',
        psestimatedStartTime: '',
        psactualEndTime: '',
        taskTransports: [],
        taskDispatch: {}
      },
      formData: {
        startLat: '',
        startLng: '',
        endLat: '',
        endLng: ''
      },
      activeNames: ['1', '2', '3', '4', '5', '6', '7'],
      propTableData: {
        col: []
      },
      titleInfo: {
        pageTitle: '',
        text: ''
      }
    }
  },
  created() {
    this.orderId = this.$route.query.orderId
    this.id = this.$route.query.id
    this.getWaybillDetail(this.id)
  },
  methods: {
    async getWaybillDetail(id) {
      try {
        const res = await getWaybillDetail(id)
        console.log(res)
        this.waybillDetail.ydId = res.id
        this.waybillDetail.taskDispatch = res.taskDispatch
        this.waybillDetail.taskRejectionDispatch = res.taskRejectionDispatch
        this.waybillDetail.taskPickup = res.taskPickup
        // 订单信息
        if (res.order != null) {
          this.waybillDetail.orderId = res.order.id
          this.waybillDetail.createTime = res.order.createTime
          this.waybillDetail.status = res.order.status
          this.waybillDetail.estimatedArrivalTime =
          res.order.estimatedArrivalTime
          this.waybillDetail.senderName = res.order.senderName
          this.waybillDetail.senderPhone = res.order.senderPhone
          this.waybillDetail.senderAddress = res.order.senderAddress
          this.waybillDetail.receiverName = res.order.receiverName
          this.waybillDetail.receiverPhone = res.order.receiverPhone
          this.waybillDetail.receiverAddress = res.order.receiverAddress
          this.waybillDetail.amount = res.order.amount
          this.propTableData.col = res.order.orderCargoDTOS
          if (res.paymentMethod === 1) {
            this.waybillDetail.paymentMethod = '预结'
          } else {
            this.waybillDetail.paymentMethod = '到付'
          }
          if (res.order.paymentStatus === 1) {
            this.waybillDetail.paymentStatus = '未付'
          } else {
            this.waybillDetail.paymentStatus = '已付'
          }
          if (res.senderProvince !== null) {
            this.waybillDetail.senderProvince = res.order.senderProvince.name
          }
          if (res.senderCity !== null) {
            this.waybillDetail.senderCity = res.order.senderCity.name
          }
          if (res.senderCounty !== null) {
            this.waybillDetail.senderCounty = res.order.senderCounty.name
          }
          if (res.receiverProvince !== null) {
            this.waybillDetail.receiverProvince = res.order.receiverProvince.name
          }
          if (res.receiverCity !== null) {
            this.waybillDetail.receiverCity = res.order.receiverCity.name
          }
          if (res.receiverCounty !== null) {
            this.waybillDetail.receiverCounty = res.order.receiverCounty.name
          }
          if (res.order.pickupType === 1) {
            this.waybillDetail.pickupType = '网点自寄'
          } else {
            this.waybillDetail.pickupType = '上门取件'
          }
          this.formData.startLat = res.order.senderCity.lat
          this.formData.startLng = res.order.senderCity.lng
          this.formData.endLat = res.order.receiverCity.lat
          this.formData.endLng = res.order.receiverCity.lng
        }
        // 运输信息
        if (res.taskTransports.length) {
          this.waybillDetail.taskTransports = res.taskTransports.reverse()
          this.waybillDetail.taskTransports.push(
            Object.assign(
              {},
              {
                startAgency: {
                  name: this.waybillDetail.taskTransports[
                    this.waybillDetail.taskTransports.length - 1
                  ].endAgency.name
                },
                status:
                this.waybillDetail.taskTransports[
                  this.waybillDetail.taskTransports.length - 1
                ].status
              }
            )
          )
        }
      } catch (error) {
        console.log(error)
        this.$message.error('当前页面没有数据')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.order-box) {
  .el-card__body {
    padding: 25px 44px;
    padding-right: 0;
    .el-row {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #20232a;
      label {
        font-weight: 400;
        color: #818693;
      }
    }
  }
}
:deep(.el-collapse) {
  .el-collapse-item__header {
    height: 60px;
    line-height: 60px;
    background: #f8faff !important;
    border-radius: 4px 4px 0 0;
    color: #2a2929;
    cursor: pointer;
    border-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    padding: 0 44px;
    .collapse-detail {
      font-size: 16px;
    }
  }
  .el-collapse-item__content {
    padding: 24px 44px;
    .el-timeline {
      padding: 0;
      position: relative;
      .img-info1 {
        width: 14px;
        height: 18px;
        vertical-align: middle;
        margin-left: 2px;
      }
      .img-info2 {
        width: 17px;
        height: 17px;
        vertical-align: middle;
        margin-bottom: 4px;
      }
      .line {
        width: 1px;
        height: 100px;
        border-left: 1px dashed #dcdcdd;
        position: absolute;
        top: 26px;
        left: 8px;
      }
      .demo-input-suffix {
        margin-top: 10px;
        span {
          font-weight: 400;
          color: #818693;
        }
      }
    }
  }
}
:deep(.transport-box) {
  .el-collapse-item__content {
    padding: 24px 44px 0;
    .el-step {
      min-width: 300px;
      flex-basis: auto !important;
      display: inline-block;
      position: relative;
    }
    .el-steps--horizontal {
      margin-bottom: 20px;
      position: relative;
      right: 100px;
    }
    .el-step__head {
      width: 300px;
      color: #419eff;
      border-color: #419eff;
      .el-step__icon {
        border: 1px solid;
        width: 40px;
        height: 40px;
        font-size: 20px;
        .el-step__icon-inner {
          font-weight: 400;
          color: #419eff;
        }
      }
      .el-step__line {
        height: 0;
        position: absolute;
        top: 20px;
        border-bottom: 1px solid #419eff;
      }
    }
    .el-step__title {
      width: 300px;
      font-size: 14px;
      font-weight: 400;
      color: #20232a;
    }
    .el-step__description {
      padding-left: 90%;
      padding-right: 10%;
      display: flex;
      justify-content: center;
      .step-row {
        min-width: 200px;
        margin-top: 10px;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          display: block;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 50px 16px 50px 16px;
          border-color: transparent transparent #f4f8fc transparent;
          top: -90px;
          left: 53%;
        }
        .processing_content {
          background: #f4f8fc;
          border-radius: 8px;
          padding: 14px 15px;
          font-size: 14px;
          color: #20232a;
          font-weight: 400;
          tr {
            margin-top: 8px;
            &:first-child td {
              padding-top: 0;
              white-space: nowrap;
            }
            td {
              text-align: left;
              padding-top: 8px;
              &:last-child {
                color: #818693;
              }
            }
            .num {
              padding-top: 0;
              color: #419eff !important;
            }
          }
        }
      }
    }
  }
}
:deep(.customer-table-box) {
  .el-collapse-item__content {
    padding: 24px 28px;
    .el-table {
      color: #20232a;
      border: 1px solid #ebeef5;
      border-bottom: 0;
    }
  }
}
</style>
